<template>
<div class="main">
    <div class="search">
         <el-input v-model="search" placeholder="请输入higo号码" class="searchinput"></el-input>
         <el-button  icon="el-icon-search" circle class="searchbtn" @click="searchID"></el-button>
         <el-button icon="el-icon-refresh-left" circle class="restbtn" @click="search=null"></el-button>
         <el-button type="primary" class="add" @click="addUser">新增</el-button>
         <el-button type="primary" :loading="download" class="export" @click="exportExcel">导出EXCEl</el-button>
         <el-button type="success"  icon="el-icon-refresh" class="refresh" circle @click="refresh"></el-button>
    </div>
    
         <el-table
    :data="currentdata"
    class="edmange"
    border
    height="500"
    width="100%"
    >
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class='totalinfo'>
          <el-form-item label="累积购买金币:">
            <span>{{ props.row.purchaseCoin||0 }}</span>
          </el-form-item>
          <el-form-item label="累积钻石兑换金币:">
            <span>{{ props.row.otaldcoins||0 }}</span>
          </el-form-item>
          <el-form-item label="累积代充金币:">
            <span>{{ props.row.chargeCoin||0 }}</span>
          </el-form-item>
          <el-form-item label="财富等级:">
            <span>{{ props.row.richlevel }}</span>
          </el-form-item>
          <el-form-item label="魅力等级:">
            <span>{{ props.row.charmlevel }}</span>
          </el-form-item>
          <el-form-item label="银行信息:">
           <el-button type="text" @click="editorbank(props.row.id)" :loading="startAjax">银行卡信息</el-button>
          </el-form-item>
          <el-form-item label="实名修改:">
           <el-button type="text"  @click="edrealname(props.row)">修改实名信息</el-button>
          </el-form-item>
          <el-form-item label="">
            
          </el-form-item>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
    align="center"
      prop="nick"
      label="higo昵称"
      >
    </el-table-column>
    <el-table-column
    align="center"
      prop="erbanNo"
      label="higoId"
      >
    </el-table-column>

    <el-table-column
    align="center"
      prop="realName"
      label="真实姓名"
      >
    </el-table-column>



    <el-table-column
    align="center"
      prop="uid"
      label="UID"
      >
    </el-table-column>
    <el-table-column
    align="center"
      prop="agentTyoe"
      label="用户类型"
      >
    </el-table-column>

        <el-table-column
        align="center"
      prop="userName"
      label="用户账户"
      >
    </el-table-column>
  
    <el-table-column
    align="center"
      prop="status"
      label="状态"
      >
      <template slot-scope="scope">
        <template v-if="scope.row.status">
 <el-button type="success" circle></el-button>
        </template>
               <template v-else>
 <el-button type="danger"  circle></el-button>
        </template>
      </template>

    </el-table-column>
    <el-table-column
    align="center"
      label="操作">
      <template slot-scope="scope">
        <el-button @click="setUpUser(scope.row)" type="text" size="small">修改</el-button>
      
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
  class="foot"
  background
  layout="prev, pager, next"
  :total="itemnum"
  @current-change="handleCurrent"
  :current-page.sync="pageNo"
  > 
</el-pagination>
 <Adduser @refresh="refresh"  :showpop="showadd" @close="resetadd" :title="'用户管理'">
    <template v-slot:content>
    <el-form ref="form" :model="adduserform" label-width="120px" :rules="addrules">
  <el-form-item label="真实姓名" prop="realName"
 
  >
    <el-input placeholder="请输入真实用户姓名" v-model="adduserform.realName"></el-input>
  </el-form-item>
  <el-form-item label="用户账号" prop="userName">
     <el-input
     placeholder="请输入用户邮箱或手机号作为登录账号"
     v-model.trim="adduserform.userName"
     ></el-input>
  </el-form-item>
    <el-form-item label="用户higo号" prop="erbanNo">
     <el-input placeholder="请输入用户higo号码" v-model.number="adduserform.erbanNo"></el-input>
  </el-form-item>
  <el-form-item label="账号状态设置" prop="status">
    <el-radio-group v-model="adduserform.status">
      <el-radio label="1">正常使用</el-radio>
      <el-radio label="0">停用</el-radio>
    </el-radio-group>
  </el-form-item>
    <el-form-item label="代理类型" prop="agentTyoe">
    <el-radio-group v-model="adduserform.agentTyoe">
      <el-radio label="1">海外代理</el-radio>
      <el-radio label="2">国内代理</el-radio>
      <el-radio label="3">国内外代理</el-radio>
    </el-radio-group>
  </el-form-item>
</el-form>
    </template>
  <template v-slot:foot>
    
    <el-button 
    type="primary" 
    :disabled="checkadd" 
    class="confirm"
    @click="dialogAdd"
     >确 定</el-button>
  
  </template>
</Adduser> 
<Editoruser @refresh="refresh" :usermallId="mallId" :showpop="editorShow" @close="editorHide" :title="'用户修改'" :userinfo="editorUserinfo" >
</Editoruser> 
<UserBank :usermallId="mallId" :showpop="editorBankShow" @close="editorHide" :title="'银行账户'" :userinfo="editorBankinfo" />
<RealName @refresh="refresh" :usermallId="mallId" :showpop="editorRealStatus" @close="editorHide" :realdata="realdata" :title="'实名信息'" :userinfo="edrealnameinfo"></RealName>

<el-dialog
  title="提示"
  :visible.sync="showaddInfo"
  width="50%"
  append-to-body
  :before-close="showaddInfoclose">
  <div class="addtitle">
       <el-button icon="el-icon-check" circle  size="mini" type="success" class="addsuccess"></el-button>已成功新增名为”{{showaddInfoData.realName}}“的普通用户账号
  </div>
   <el-form
    v-if="showaddInfoData"
     :model="showaddInfoData"
     label-position="top"
     size="mini"
     >
    <el-form-item label="用户名称">
      {{showaddInfoData.realName}}
    </el-form-item>
    <el-form-item label="用户账户">
    {{showaddInfoData.userName}}
    </el-form-item>
    <el-form-item label="用户密码">
    {{showaddInfoData.password}}
    </el-form-item>
        <el-form-item label="登录网址">
   https://www.higolive888.com/front/HigoCoins/index.html
    </el-form-item>
  </el-form>
  <span slot="footer" class="addinfofooter">
    <el-button
    :data-clipboard-text="'登陆页面：https://www.higolive888.com/front/HigoCoins/index.html'+`用户名称：${showaddInfoData.realName}`+`用户账户：${showaddInfoData.userName}`+`用户密码：${showaddInfoData.password}`"  
    id="copy"  
    @click="copy">确认并复制信息</el-button>
  </span>
</el-dialog>


 


</div>

</template>

<script>
  import Adduser from "@/components/part/edmange/adduser.vue"
  import Editoruser from "@/components/part/edmange/editoruser.vue"
  import UserBank from "./part/edmange/user_bank.vue"
  import RealName from "./part/edmange/user_realname"
  import { findUserInfo,AddUserRequest, agentBankCardlist,agentRealinfo } from '../Util/request'
  import Clipboard from "clipboard"
  export default {
    
    data() {
      return {
        tableData: [],
        currentdata:[],
        pageNo:1,
        search:null,
        itemnum:0,
        showadd:false,
        checkadd:true,
        adduserform:{
          realName:'',
          userName:"",
          erbanNo:"",
          status:"",
          agentTyoe:""
        },
        addrules:{ 
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          account: [
            { required: true, message: '请输入用户账号', trigger: 'change' },
      
          ],
         higoid: [
            { required: true, message: '请输入higoID', trigger: 'change' },
             { type: 'number', message: 'HIGOID必须为数字值'}
          ],
          status: [
            { required: true, message: '请选择状态', trigger: 'change' }
          ],
          type: [
            { required: true, message: '选择代理类型', trigger: 'change' }
          ]
        },
        editorShow:false,
        editorBankShow:false,
        editorUserinfo:{},
        editorBankinfo:[],
        startAjax:false,
        edrealnameinfo:{},
        editorRealStatus:false,
        mallId:null,//正在操作的用户id
        realdata:{},//正在操作的用户实名信息,
        pagenum:1,
        showaddInfo:false,
        showaddInfoData:{},
        download:false
      }
    },

      mounted(){
        this.getlistInfo({})
    },
    methods: {
      handleCurrent(e){
       this.pagenum=e
       this.currentdata=this.getlistInfo({
         page:e
       })
      },
      setUpUser (e){
        this.editorUserinfo=e
        this.editorShow =true
        console.log(this.editorUserinfo);
      },
      //修改bank
      editorbank(e){
        console.log(e);
        this.mallId=e
        console.log(this.mallId);
        agentBankCardlist((res)=>{
            this.editorBankinfo= res.data.list
            this.editorBankShow=true
        },{mallId:e})

      },
        //实名组件拉起
      edrealname(e){
        console.log(e);
          agentRealinfo((res)=>{
            if(res.code==200){
              this.realdata= res.data
            }else{
              this.$message({
                message:"未知错误",
                type:"erroe"
              })
            }
          },{
              uid:e.uid
          })


          this.edrealnameinfo=e
          this.editorRealStatus=true

        },
      editorHide(e){
            this.editorBankShow=false
            console.log(e,"修改bank关闭");
            this.editorRealStatus=false
            this.editorShow=false
           
      },
      choose(){
        // console.log(this.search);
        this.tableData.forEach(el => {
          if(el.higonum===this.search){
            this.currentdata =[el]
          }
          
        });
      },
      //重置用户dialog表单值
      resetadd(){
        this.showadd=false
        console.log("关闭按钮触发");
        this.adduserform={
          realName:'',
          userName:"",
          erbanNo:"",
          status:"",
          agentTyoe:""
        }
      },
      //刷新页面
      refresh(){
        this.handleCurrent(this.pagenum)
       
        // this.getlistInfo({})
        // this.currentdata=this.tableData.slice(0,10);
      
      },
      //add按钮控制函数
      addUser(){
        this.showadd=true
        
      },
      dialogAdd(){
         console.log(this.adduserform)
         AddUserRequest((res)=>{
           console.log(res);
           if(res.code==200){
                this.$message({
                message: '添加成功!',
                type: 'success'
               });
               this.showaddInfoData=res.data
              this.showaddInfo = true
           }else{
               this.$message({
                message: res.msg,
                type: 'warning'
              });
           }
            this.showadd=false
          
            this.getlistInfo({})
         },this.adduserform)
      },
      searchID(){
        if(this.search){
          this.getlistInfo({
            erbanNo:this.search
          })
        }
      },
      showaddInfoclose(){
        this.showaddInfo=false
        this.showaddInfoData=null
      },
  copy () {
      var clipboard = new Clipboard('#copy')
   clipboard.on('success', e => {
        this.showaddInfo=false
        this.showaddInfoData={}
        this.$message({
          message:'复制成功',
          type:'success'
        })
      //  释放内存
     clipboard.destory()
   })
    clipboard.on('error', e =>{
     // 不支持复制
      this.$message({
          message:'该浏览器不支持复制',
          type:'error'
        })
     // 释放内存
     clipboard.destory()
   })
      },
      //到处excel文件
      exportExcel() {
        this.download = true
        findUserInfo((res)=>{
        if(res.code ==200){
          this.tableData=res.data.list
          this.tableData.forEach((el)=>{
              switch (el.agentTyoe) {
                case 1:
                    el.agentTyoe="海外"
                  break;
                case 2:
                    el.agentTyoe="国内"
                    break;
                case 3:
                    el.agentTyoe="海内外"
                  break;
               
              }
          })
        import('@/Util/Export2Excel.js').then(excel => {
        const tHeader = ['higo昵称', 'higo号码', 'UID', '用户类型', '累积购买金币',"累积钻石购买金币",'累积代充金币',"用户账号",'财富等级','魅力等级','状态']
        const filterVal = ['nick', 'erbanNo', 'uid', 'agentTyoe', 'purchaseCoin',"totaldcoins",'chargeCoin','userName','richlevel','charmlevel','status']
        const list = this.tableData;
        const data =  this.formatJson(filterVal,list)
        console.log(data);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "HIGO COINS MANAGER",
          autoWidth: true,
          bookType: "xlsx"
        })
         this.download =false
      })
  
        }
      },{
        rows:this.itemnum
      })
      
      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
      //获取列表数据操作函数
      getlistInfo(obj){
        this.search=null
      findUserInfo((res)=>{
        if(res.code ==200){
          this.tableData=res.data.list
          this.tableData.forEach((el)=>{
              switch (el.agentTyoe) {
                case 1:
                    el.agentTyoe="海外"
                  break;
                case 2:
                    el.agentTyoe="国内"
                    break;
                case 3:
                    el.agentTyoe="海内外"
                  break;
               
              }
          })
          this.itemnum = res.data.total
          this.currentdata=this.tableData.slice(0,10)
        }
      },obj)
      }
    },
    components:{
       Adduser,
       Editoruser,
       UserBank,
       RealName
    },

    watch:{
      adduserform:{
      handler(n, o) {
        for(let i  in n){
          if(!n[i]){
             this.checkadd=true
             return
          }else{
            this.checkadd=false
          }
        }
      },
      deep: true
      },

    }
  }
</script>

<style lang="less" scoped>

.totalinfo {
  font-size: 0;
  padding-left: 40px;
   /deep/.el-form-item__label{
    width: 130px;
    color: #99a9bf;
  }
   .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}
.edmange{
  margin-top:100px ;
}
.edmange::-webkit-scrollbar{
  width: 0;
  height: 0;
}
/deep/.el-table__body-wrapper::-webkit-scrollbar{
  width: 0;
  height: 0;
}
.main{
  position: relative;
    .search{
    position: absolute;
    width: 100%;
    height: 90px;
    top: -111px;
    .searchinput{
      display: inline-block;
      margin-left: 30px;
      width: 200px;
      margin-top: 60px;
    }
    .searchbtn{
      margin-left: 20px;
      background-color: #409EFF;
      color: #fff;
    }
    .restbtn{
      margin-left:10px;
     background-color: #409EFF;
      color: #fff;
    }
    .export{
      position: absolute;
      right: 90px;    
      bottom: -16px;
    }
    .refresh{
      position: absolute;
      right: 20px;    
      bottom: -16px;
    }
    .add{
      position: absolute;
      right: 250px;    
      bottom: -16px;
      width: 100px;
    }
    // background-color: red;
  }
  .foot{
          width: 396px;    
          height: 34px;     
          float: right;
  }
}
.addtitle{
  width: 100%;
  background-color: #edf8e8;
 
}
.addinfofooter{
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  // background-color: red;
  #copy{
    position: absolute;
   
    left: 50%;
    transform: translateX(-50%);
  }
}
.confirm{
  position: absolute;
  width: 200px;

  height:43px;
}

</style>